<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>

<style type="text/css">
    .ui-datepicker-calendar {
        display: none;
    }

    .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
        width: 44%;
    }

    .tablewrapper table#example {
        width: 1024px !important;
    }

    .ui-progressbar {
        position: relative;
    }
    .progress-label-ie {
        position: absolute;
        left: 50%;
        top: 4px;

    }
</style>

<div class="panel_container">
    <div class="panel">
        <form id="formId" method="post" action="${ctx}/discount/importUpdate">
            <div class="panel_header">
                <div><h2>导入修改</h2></div>
            </div>
            <div class="panel_body">
                <div>
                    <div>
                        <div class="info_item"><span>请选择业务时间:</span><b>*</b>
                            <input type="text" name="sjsj" maxlength="10" id="sjsj"/>
                        </div>
                    </div>
                    <div>
                        <div class="info_item"><span>导入文件:</span><b>*</b>
                            <input type="file" id="importFile" name="importFile" />
                        </div>
                        <div class="info_item">
                            <a href="${ctx}/file/down?fileName=template-discount&systemType=temp">下载贴现业务模板</a>
                        </div>
                    </div>
                    <div>
                        <div id="progressbar" style="display:none"><div class="progress-label-ie">加载。。。</div></div>
                        <div ><div id="message"></div></div>
                    </div>
                </div>
            </div>
            <div class="panel_footer">
                <div>
                    <input type="submit" value="导入" class="btn_blue" id="btn_save"/>
                    <input type="button" style="display:none" onclick="refreshPage()" value="重新导入" class="btn_blue" id="btn_refresh"/>
                    <input type="button" value="返回" class="btn_blue" id="btn_back"/>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">

    function goBack(){
        linkTo("${ctx}/discount/toDiscount");
    }

    function refreshPage(){
        linkTo("${ctx}/discount/toImportDiscount");
    }


    $(function () {

        var data="";
        var progressbar = $( "#progressbar" ),
                progressLabel = $( ".progress-label-ie" );

        progressbar.progressbar({
            value: false,
            change: function() {
                progressLabel.text( progressbar.progressbar( "value" ) + "%" );
            },
            complete: function() {
                progressLabel.text( "完成！" );
                $("#message").empty();
                var  resultMessage =data.split("===") ;
                $("#message").append("查看详细返回信息");
                for(var i=0;i<resultMessage.length-1;i++){
                    $("#message").append("<br>");
                    $("#message").append(i+1).append(". ").append(resultMessage[i]);

                }

                $("#btn_refresh").show();
                $("#btn_save").hide();
            }
        });

        function progress() {
            var val = progressbar.progressbar( "value" ) || 0;
            progressbar.progressbar( "value", val + 1 );
            if ( val < 99 ) {
                setTimeout( progress, 100 );
            }
        }

        $("#sjsj").datepicker({
            defaultDate: "+1w",
            changeYear: true,
            changeMonth: true,
            numberOfMonths: 1,
            dateFormat: "yy-mm",
            onChangeMonthYear: function (year, month, inst) {
                var selected_month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var selected_year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(selected_year, selected_month, 1));
            },
            beforeShow: function (input, inst) {
                if ((datestr = $(this).val()).length > 0) {
                    actDate = datestr.split('-');
                    year = actDate[0];
                    month = actDate[1] - 1;
                    $(this).datepicker('option', 'defaultDate', new Date(year, month));
                    $(this).datepicker('setDate', new Date(year, month));
                }
            }
        });


        $("#btn_back").bind("click",goBack);

        $("#btn_save").bind(function() {
            submitForm();
        });


        $("#formId").validate({
            rules:{
                sjsj: "required",
                importFile: "required"
            },
            messages:{
                sjsj: "业务时间必选",
                importFile: "文件必选上传"
            },
            submitHandler: function(form) {
                $(form).ajaxSubmit({
                    beforeSubmit:function(){
                        $("#progressbar").show();
                    },
                    success: function (response) {
                        data = $.parseJSON(response).message;
                        progress();
                    },
                    error: function(lv){
                        $.prompt("上传失败:"+lv,"错误");
                    }
                });
            }
        });
    });

</script>

